﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>个人中心</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
    <!--公有引用-->
    <link rel="stylesheet" th:href="@{/css/weui.css}" />
    <link rel="stylesheet" th:href="@{/css/weui2.css}" />
    <link rel="stylesheet" th:href="@{/css/weui3.css}" />
    <script th:src="@{/js/zepto.min.js}"></script>
    
</head>
<body>
    <!--详情-->
    <div class="member_title_box" style="position: fixed;z-index:2;top:0;">
        <img th:src="${session.OAUTH_USER.headimgurl}" class="circle" style="width: 40px; height: 40px;" />
        <h4 th:text="${session.OAUTH_USER.nickName}"></h4>
    </div>
    <div class="weui_tab " style="height: 4px; " id="tab">
        <!--<div class="weui_navbar" style="height: 44px; position: fixed; z-index: 2; top: 120px;">
            <div class="weui_navbar_item">
                全部
            </div>
            <div class="weui_navbar_item">
                待付款
            </div>
            <div class="weui_navbar_item ">
                已付款
            </div>
        </div>-->
    </div>
    <div id="order_list">

        <div class="weui_cells" th:each="order : ${orders}">
            <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary" th:text="${order.tradeNo}">
                </div>
                <div class="weui_cell_ft f-red" th:text="${order.formatStatus}"></div>
            </div>
            <a th:href="@{${order.formatAction}}" class="weui_media_box weui_media_appmsg">
                <div class="weui_media_hd">
                    <img class="weui_media_appmsg_thumb" th:src="${order.playImage}" />
                </div>
                <div class="weui_media_bd">
                    <h4 class="weui_media_title" th:text="${order.playName}"></h4>
                    <p class="weui_media_desc"><i class="icon icon-51"></i><span th:text="${order.playDate}"></span></p>
                    <p class="weui_media_desc"><i class="icon icon-46"></i> 长沙红太阳</p>
                    <h4 class="weui_media_title f-red" th:text="${'¥'+order.payAmount}"></h4>
                </div>
                <div class="weui_order_ft" th:text="'x'+${order.quantity}"></div>
            </a>
            <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">

                </div>
                <div class="weui_cell_ft f-red actions"><a href="#" th:attr="data-id=${order.orderId},data-code=${order.playCode},data-url=${order.formatAction}" class="weui_btn weui_btn_mini weui_btn_warn" th:text="${order.formatActionDesc}"></a></div>
            </div>
        </div>
        <div class="weui-loadmore weui-loadmore-line">
            <span class="weui-loadmore-tips">暂无数据</span>
        </div>
    </div>
    <!--底部导航-->
    
    <div class="weui_tab tab-bottom">
        <div class="weui_tabbar">
            <a href="index.html" class="weui_tabbar_item">
                <div class="weui_tabbar_icon">
                    <img src="../images/icon_trailer_default.png" alt=""/>
                </div>
                <p class="weui_tabbar_label">预告</p>
            </a>
            <a href="list.html" class="weui_tabbar_item">
                <div class="weui_tabbar_icon">
                    <img src="../images/icon_show_default.png" alt=""/>
                </div>
                <p class="weui_tabbar_label">演出</p>
            </a>
            <a href="member.html" class="weui_tabbar_item">
                <div class="weui_tabbar_icon">
                    <img src="../images/icon_mine_default.png" alt=""/>
                </div>
                <p class="weui_tabbar_label">我的</p>
            </a>
        </div>
    </div>
    <script>
        //底部导航
        $(function () {
            var weui_tabbar = $(".weui_tabbar").children("a");
            weui_tabbar.eq(2).addClass("weui_bar_item_on").find("img").attr("src", "../images/icon_mine_selected.png");
        });
        $(function () {
            $(".weui_cells").eq(0).css("margin-top", "0");
            $("#order_list .weui_cells").length > 0 ? $("#order_list").css("margin-top", "85px") : $("#order_list").css("margin-top", "320px");
            //tab点击
            $('#tab').tab({ activeClass: "tab-red"});
            $('.weui_navbar_item').on('click', function () {
                //alert($(this).index());
            });
        });
        $('.actions').on('click',function(){
        	 var me = $(this);
        	 if(me.text() === '取票码'){
        		 $.alert(me.data("id")+111, "取票码");
        	 }else if(me.text() === '删除订单'){
        		 $.confirm("您确定要删掉该订单吗?", "提示", function () {
                     $.ajax({
                         type: "GET",
                         url: "/wechat/deleteOrder",
                         data: {orderId:me.data("id")},
                         complete : function(XHR, TS){
                             var response = {code : -1,msg:'system error'};
                             try{
                                 response = JSON.parse(XHR.responseText);
                             }catch(e){;}
                             if(response.code === 0){
                            	 $.alert('订单删除成功！','操作提示');
                             }else{
                             	$.alert(response.msg,'操作提示');
                             }
                         }
                     });
                 });
        	 }else{
                 location.href = me.data("url");
             }
        });
    </script>
</body>
</html>
